<template>
	<view class="content">
		<view class="btn-wrap">
			<u-button class="btn" type="warning" text="一键计算" size="small"></u-button>
			<u-button class="btn" type="primary" text="新增" size="small"></u-button>
		</view>
		<u-cell-group>
			<u-cell v-for="item in list" :key="item.id" size="large" :title="item.name" :label="item.have" isLink>
				<view slot="value" class="item-cont" @click="go(item)">
					<view class="up_down">
						<u-icon v-if="item.estimation >0" name="arrow-upward" size="20" color="#f56c6c"></u-icon>
						<u-icon v-else name="arrow-downward" size="20" color="#5ac725"></u-icon>
					</view>
					<view><text>{{item.estimation >0?'卖出':'买入'}}</text><text class="scale">{{item.result}}</text></view>
				</view>
			</u-cell>
		</u-cell-group>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: "123",
				list: [{
					id: 2,
					name: "动漫",
					have: 4000,
					rest: 4000,
					high: 0,
					low: -9.1,
					estimation: -1.1,
					current_difference: -0.9,
					total_difference: 1.5,
					result: 0
				}, {
					id: 3,
					name: "机器人",
					have: 10897.63,
					rest: 16787,
					high: 1.6,
					low: -6.46,
					estimation: -1.4,
					current_difference:0,
					total_difference: 0,
					result: 0
				}, {
					id: 1,
					name: "人工智能",
					have: 17923.79,
					rest: 14210,
					high: 0,
					low: -9.81,
					estimation: 0.3,
					current_difference:0,
					total_difference: 0,
					result: 0
				}, {
					id: 4,
					name: "华安",
					have: 13.5977,
					rest: 41572,
					high: 3.65,
					low: -1.85,
					estimation: -0.1,
					current_difference:0,
					total_difference: 0,
					result: 0
				}],
				num: 10,
				isTriggeredTop: false
			}
		},
		onLoad() {

		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			setTimeout(() => {
				this.num = 40
				uni.stopPullDownRefresh(); //停止刷新
			}, 2000)
		},
		onReachBottom() {
			console.log('onReachBottom');
			setTimeout(() => {
				this.num = 60
				uni.stopPullDownRefresh(); //停止刷新
			}, 2000)
		},
		methods: {
			go(item) {
				const query = `?${this.object_to_query(item)}`
				uni.navigateTo({
					url: `/pages/detail/detail${query}`
				});
			},
			object_to_query(obj){
				const query = new URLSearchParams()
				
				for(const key in obj){
					if(obj.hasOwnProperty(key)){
						query.append(key, obj[key])
					}
				}
				return query.toString()
			},
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;

		.btn-wrap {
			display: flex;
			margin: 30rpx 30rpx;

			.btn {
				margin: 0 30rpx;
			}
		}
	}

	.item-cont {
		display: flex;
		align-items: center;

		.up_down {
			margin-right: 30rpx;
			font-size: 30rpx;
		}

		.scale {
			margin-left: 20rpx;
		}
	}
</style>